<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本列表</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">

        <!-- v-for遍历数组 -->
        <h2>{{name}}</h2>
        <ul>
            <li v-for='(p,index) in persons' :key="p.id">
                {{p.name}}--{{p.age}}--{{index}}
            </li>
        </ul>

    </div>
    <script>

        /* 面试题: react、vue中的key有什么作用(key的内部原理)
        1.虚拟dom中key的作用：
        key是虚拟dom对象的标识，当状态中的数据发生变化时，vue会根据新数据生成新的虚拟dom，随后vue进行新的虚拟dom与旧的虚拟dom的差异比较

        2.对比规则:
        (1)旧虚拟dom找到了与新虚拟dom相同的key:
        若虚拟dom中内容没变 则直接使用之前的真实dom
        若虚拟dom中内容变了 则生成新的真实dom并替换掉页面中之前真实的虚拟dom

        (2)旧虚拟dom中未找到与新虚拟dom相同的key:
        创建新的真实dom，渲染到页面中

        3.用index作为key可能会引发的问题:
        若对数据进行：逆序增加，逆序删除等破坏顺序的操作:
        会产生没有必要的真实dom更新，界面效果没问题，但效率低

        如果结构中还包含输入类的dom：
        会产生错误dom更新，界面会产生问题

        4.开发中如何选择key:
        最好选择每条数据的位移表示作为key 比如id，手机号，身份证号，学号等唯一值
        如果不存在对数据的例如逆序添加等破坏顺序的操作，仅用于渲染到页面进行展示，使用index作为唯一标识符是没有问题的 */

        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#root',
            data: {
                name: 'xiaoyao',
                persons: [
                    { id: 1, name: '张三', age: 20 },
                    { id: 2, name: '李四', age: 30 },
                    { id: 3, name: '王五', age: 40 },
                ],
            },
            methods: {}
        });
    </script>
</body>

</html>